<template>
  <view>
    <u-toast ref="uToast" />
    <u-upload
      :upload-text="text"
      :max-count="maxCount"
      :max-size="5 * 1024 * 1024"
      @on-error="handleError"
      @on-success="handleSuccess"
      :action="uploadUrl"
      :header="uploadHeader"
      :file-list="files"
      :form-data="uploadData"
      @on-remove="handleRemove"
      :width="width"
      :show-progress="false"
      class="upload-btn"
    >
    </u-upload>
  </view>
</template>

<script>
import { uploadBaseUrl } from '@/config.js';
export default {
  name: 'upload',
  props: {
    fileList: {
      type: Array,
      default: () => new Array(),
    },
    text: {
      type: String,
      default: '选择图片',
    },
    maxCount: {
      type: Number,
      default: 1,
    },
    width: {
      type: Number,
      default: 700,
    },
  },
  data() {
    return {
      uploadUrl: uploadBaseUrl + '/aliyun/uploadImage',
      uploadHeader: {
        Authorization: 'Bearer ' + uni.getStorageSync('token'),
      },
      uploadData: {},
      files: [],
    };
  },
  watch: {
    fileList() {
      this.files = this.fileList.map((m) => {
        return {
          url: uni.$zx.deliverDownloadBaseUrl + m,
        };
      });
    },
  },
  created() {
    this.$nextTick(() => {
      this.files = this.fileList.map((m) => {
        return {
          url: uni.$zx.deliverDownloadBaseUrl + m,
        };
      });
    });
  },
  methods: {
    handleError(res) {
      this.$refs.uToast.show({
        title: res,
        type: 'error',
      });
    },
    handleSuccess(data, index, lists, name) {
      console.log('success----->', data);
      if (data.code === 200) {
        this.$emit('success', data.data[0].path);
      }
    },
    handleRemove(index, lists, name) {
      this.$emit('remove', index);
    },
  },
};
</script>

<style scoped lang="scss">
// .upload-btn {
//   background-image: url("../../static/image/home/img_store_bg.png");
// }
</style>
